<template>
  <section class="variety">
      <vheader title="分类">
        <section slot="right">
          <i class="fa fa-search"></i>
        </section>
      </vheader>
      <section class="main">
        <btn @linkbtn="togglebtn" :btn="btnList" :nowIndex="nowIndex"/>
        <v-view :viewShow="viewList"></v-view>
      </section>
      <vfoot></vfoot>
  </section>
</template>
<script>
import header from "../../components/header/header";
import btn from "./btn/btn";
import view from "./view/view";
import foot from "../../components/foot/foot";

export default {
  name:'variety',

  data(){
    return {
      nowIndex:0,      
      btnList:[
        {
          btnName:'铁观音',
          varietyId:128
        },
         {
          btnName:'普洱',
          varietyId:129
        },
         {
          btnName:'红茶',
          varietyId:130
        },
         {
          btnName:'绿茶',
          varietyId:131
        },
         {
          btnName:'大红袍',
          varietyId:132
        },
         {
          btnName:'黑茶',
          varietyId:133
        },
         {
          btnName:'龙井茶',
          varietyId:134
        },
         {
          btnName:'茶具',
          varietyId:135
        }
      ],
      viewList:{},
    }
  },
  components:{
    vheader:header,
    btn,
    vView:view,
    vfoot:foot,
  },
  created(){
    this.getVariety(128);
  },
  methods: {
    clickLeft() {
      console.log("首页组件使用了variety组件的时间");
    },
    togglebtn(item,btnindex){
      this.getVariety(item.varietyId);
      this.nowIndex=btnindex;
    },
    getVariety(varietyId){
      this.$http.get(
        "https://www.easy-mock.com/mock/5a044f10d173a7750a8c8c86/variety/getVariety?varietyId="+
        varietyId
      ).then(({body})=>{
        if(body.code===200){
          // console.log(body.data);          
          this.viewList=body.data;
          // console.log(this.viewList)
        }
      })
    }
  }
};
</script>
<style lang="scss">
@import "../../assets/scss/_index.scss";
.main{
  display: flex;
  width: 100%;
  border-top: 1px solid #dddddf;
}
</style>